<template>
  <el-dialog :close-on-click-modal="false" :visible.sync="visible" title="选择模板" width="900px">
    <el-select
      filterable
      v-model="selectValue"
      @change="handleChange"
      clearable
      multiple
      class="mb20 mr20"
      style="width: 43%"
    >
      <el-option
        v-for="(item,index) in selectData"
        :key="index"
        :label="item.evalTypeName"
        :value="item.evalTypeId"
      />
    </el-select>
    <el-tooltip
      class="item"
      effect="light"
      content="下拉选择类型后，穿梭框左侧展示相应数据，勾选点击按钮到右侧，点击下一步"
      placement="top"
    >
      <i class="fs16 el-icon-warning-outline"></i>
    </el-tooltip>
    <x-transfer
      @postData="handlePostData"
      :titles="['可选考评项目', '已选考评项目']"
      :from="fromData"
      :to="toData"
      class="mt20"
      ref="xTransfer"
    />
    <div slot="footer">
      <el-button @click="visible = false">取消</el-button>
      <el-button type="primary" @click="handleSure">确定</el-button>
    </div>
  </el-dialog>
</template>

<script>
import { openNotification, getSession } from '@/utils/util'
import XTransfer from '@/components/XTransfer'
import { getEvalParent, schemeCreate, evalItemGet, detailedItemCreate, getByEvalTarget } from '@/api/eval'

export default {
  components: {
    XTransfer
  },
  data() {
    return {
      fromData: [], // 穿梭树数据
      toData: [],
      saveArr: [],
      selectValue: null,
      selectData: [],
      mdl: {
        evalSchemeName: null,
        ownerUserId: null,
        createUser: null,
        createTime: null
      },
      personal: false,
      isEdit: false,
      type: '',
      visible: false,
      row: this.$route.params.row || getSession('startTestRow')
    }
  },
  mounted() {
    getEvalParent().then(res => {
      this.selectData = res.data
    })
  },
  methods: {
    // index 传递过来的已有项目的数组
    postArr(arr) {
      console.log('templateModal', arr)
      arr.map(v => {
        v.key = v.evalItemId
        v.label = v.evalItemName
        v.disabled = true
      })
      this.toData = [...arr]
      this.saveArr = [...arr] // 保存显示数据，后续提交的时候过滤掉已存在的
    },
    // XTransfer 传递出来的数据
    handlePostData(arr) {
      this.toData = [...arr]
    },
    // 下拉框切换 fromData 数据
    async handleChange(val) {
      let arr = []
      if (val.length > 0) {
        this.selectData.map(v => {
          val.map(j => {
            console.log('v', v)

            if (v.evalTypeId === j) {
              arr = [...arr, ...v.evalItemList]
              arr.map(v => {
                let type = v.rewardType === 1 ? '奖' : v.rewardType === 2 ? '惩' : '奖或惩'
                let type1 = v.rewardOrientation === 1 ? '分' : '钱'
                v.key = v.evalItemId
                v.label = v.evalItemName + '-' + type + '-' + type1
              })
              this.$nextTick(() => {
                this.fromData = [...arr]
              })
            }
          })
        })
      } else {
        this.fromData = []
      }
    },
    deleteArr(arr1, arr2) {
      // arr1 是删除的数组
      for (let i = arr1.length - 1; i >= 0; i--) {
        for (let j = arr2.length - 1; j >= 0; j--) {
          if (arr1[i].evalItemId === arr2[j].evalItemId) {
            arr1.splice(i, 1)
          }
        }
      }
    },
    async edit(num) {
      this.visible = true
      this.fromData = []
      this.selectValue = null
      let res = await getByEvalTarget({ evalTarget: num })
      if (res.state === '000000') {
        this.selectData = res.data
      }
    },
    async handleSure() {
      this.$refs.xTransfer.postToData()
      const { evalTaskId } = this.row
      let evalDetailedId = this.row.evalDetailedId ? this.row.evalDetailedId : getSession('evalDetailedId')
      console.log('evalDetailedId', evalDetailedId)

      let arr = []
      let arr1 = [...this.toData]
      this.deleteArr(arr1, this.saveArr)
      arr1.map(v => {
        arr.push({
          evalDetailedId,
          evalTaskId,
          evalItemId: v.evalItemId,
          extraItem: 1
        })
      })
      console.log('param', arr)
      const res = await detailedItemCreate(arr)
      if (res.state === '000000') {
        openNotification('success', '追加项目成功')
        this.visible = false
        this.$emit('refresh')
      }
    }
  }
}
</script>

<style scoped>
.el-transfer >>> .el-transfer-panel {
  width: 44%;
}
.el-transfer >>> .el-transfer-panel__body .el-transfer-panel__filter {
  width: 90%;
  margin: 10px 5%;
}
.el-transfer >>> .el-transfer__buttons {
  padding: 0 10px;
}
.el-transfer >>> .el-button {
  padding: 5px;
}
</style>